<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head lang="zh-CN">
    <base href="<%=basePath%>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>续费</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--<link rel="stylesheet" type="text/css" href="styles.css">-->
	<link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="${basePath}/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="${basePath}/layer/2.4/layer.js"></script>
	<style type="text/css">
		.round {
		   -moz-border-radius: 10px;      /* Gecko browsers */
		   -webkit-border-radius: 10px;   /* Webkit browsers */
		   border-radius:10px;            /* W3C syntax */
		}
		#imghead2{
    		width:50px;
	        height:50px;
	        border-radius:200px;
    	}
	</style>
	<script type="text/javascript">

			function order(){
				var yid=document.getElementById("yid").value;
				var year=document.getElementById("year").value;
				var moblie=document.getElementById("moblie").value;
				var yphone=document.getElementById("yphone").value;
				$.ajax({
						url:"${basePath}/v/buy",
						async: true,
						data:{
							yid:yid,
							year:year,
							moblie:moblie,
							yphone:yphone
						},
						beforeSend:function(XMLHttpRequest){
	  						document.getElementById("imghead2").style.display="block";
	  						document.getElementById("button").style.display="none";
		  				},
						success:function(data){
							if(data == 1){
								document.getElementById("imghead2").style.display="none";
								document.getElementById("button").style.display="block";
								alert("体验小区每个用户只能购买1次/1年有效");
							}else{
								var s=JSON.parse(data);
								if(s.code==0){
									if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
										ios(s.content.colour_sn,'https://wwl.ycws.cc/h5/v/returning',moblie,yphone);
									}else{
										android(s.content.colour_sn,'https://wwl.ycws.cc/h5/v/returning',moblie,yphone);	//android调用代码
									}
								}else if(s.code==427){
									alert("商户订单号已经存在");
								}
							}
						},
						fail:function(){
							alert("下单失败");
						}
					});
				}
	</script>
	<script type="text/javascript">
	/* 2.JS调用ＩＯＳ代码
	 * 格式：*payFromHtml5*彩之云订单号*回调状态地址
	 * payFromHtml5,ios会自动识别
	 * @paramsn彩之云订单号
	 * @paramurl回调地址
	 * @return
	 * 2015.5.6
	 */
		function ios(sn,url,moblie,yphone){
			varurl="*payFromHtml5*"+sn+"*"+url+"?moblie="+moblie+"&yphone="+yphone;
			location.href=url;
			//或用iframe来访问：
			//<iframesrc=url></iframe>
		}
		/*
		 *注意：(对于ios)支付成功返回界面的时候，如果有先提示一个404报错，然后跳转到回调的地址页面，请使用下面的方法
		 */
		 function ios(sn,url,moblie,yphone){
			loadURL("*payFromHtml5*"+sn+"*"+url+"?moblie="+moblie+"&yphone="+yphone);
		}
		function loadURL(url) {
			 var iFrame;
			 iFrame = document.createElement("iframe");
			 iFrame.setAttribute("src", url);
			 iFrame.setAttribute("style", "display:none;");
			 iFrame.setAttribute("height", "0px");
			 iFrame.setAttribute("width", "0px");
			 iFrame.setAttribute("frameborder", "0");
			 document.body.appendChild(iFrame);
			 // 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
			 iFrame.parentNode.removeChild(iFrame);
			 iFrame = null;
		}
	</script>
	<script type="text/javascript">
	/* 3.JS调用Android代码
	 * 格式：jsObject.payFromHtml(彩之云订单号，回调状态地址);
	 * jsObject.payFromHtml此方法是固定的方法名,安卓会自动识别
	 * @paramsn彩之云订单号
	 * @paramurl回调地址
	 * @return
	 * 2015.5.6
	 */
		function android(sn,url,moblie,yphone){
			jsObject.payFromHtml(sn,url+"?moblie="+moblie+"&yphone="+yphone);
		}
	</script>
  </head>
  <body>
  	<div class="container-fluid">
      <div class="row">
      	<form id="form" action="${basePath}/p/buy" method="get">
      	<input type="hidden" name="yid" id="yid" value="${yid}">
      	<input type="hidden" name="moblie" id="moblie" value="${userid}">
      	<input type="hidden" name="yphone" id="yphone" value="${yphone}">
     	<table border="0px solid red" width="100%" height="100%">
     		<tr height="3%" style="background-color: #edeff0">
     			<td colspan="3"></td>
     		</tr>
     		<tr height="2%" style="background-color: white">
     			<td colspan="3"></td>
     		</tr>
     		<tr height="5%">
     			<td colspan="3">
     				<div style="float: left; border: 0px red solid; width: 30%; height:100%; text-align: right; color: #888888;">续费购买&nbsp;&nbsp;&nbsp;</div>
     				<div style="float: left; border: 0px red solid; width: 20%; height:100%; font-size: 16px;">
     					<select style="width: 100%; height: 100%;" class="round" name="year" id="year">
     						<option value="1">1</option>
     						<option value="2">2</option>
     						<option value="3">3</option>
     					</select>
     				</div>
     				<div style="float: left; border: 0px red solid; width: 50%; height:100%; font-size: 16px; text-align: left; color: #888888;">&nbsp;&nbsp;&nbsp;年(年/30元)</div>
     			</td>
     		</tr>
     		<tr height="5%">
     			<td colspan="3">
     				<div style="float: left; border: 0px red solid; width: 30%; height:100%; text-align: center;"></div>
     				<div style="float: left; border: 0px red solid; width: 70%; height:100%; font-size: 12px; color: black; padding-top: 5px;">刷脸需按年付费,每年是30元</div>
     			</td>
     		</tr>
     		<tr height="3%" style="background-color: #edeff0">
     			<td colspan="3"></td>
     		</tr>
     		<tr height="2%" style="background-color: white">
     			<td colspan="3"></td>
     		</tr>
     		<tr height="10%" >
     			<td colspan="3" align="center">
     				<div id="button" style="width: 200px; height: 50px; line-height:50px; background-color: #49a1f2; color: white;" class="round" onclick="order()">确定支付</div>
     				<img id="imghead2" style="display: none;" src="http://wwl.ycws.cc/image/backgroundimage/2.gif" >
     			</td>
     		</tr>
     		<tr height="62%" style="background-color: #edeff0"><td colspan="3"></td></tr>
     	</table>
     	</form>
      </div>
    </div>
  </body>
</html>
